<template>
  <XcDrawer ref="drawer" :title="$t('button.add')+$t('page.app.nodeform.title')" :width="640" @onDrawerSave="onSave">
    <Form ref="nodeform" :model="node" :label-width="0" :rules="rules">
      <FormItem prop="host">
        <Input v-model="node.host" :placeholder="$t('page.app.nodeform.host')"></Input>
      </FormItem>
      <FormItem prop="port">
        <Input maxlength="5" v-model="node.port" :placeholder="$t('page.app.nodeform.port')"></Input>
      </FormItem>
      <FormItem prop="group">
        <Select v-model="node.group" filterable clearable :placeholder="$t('page.app.nodeform.group')">
          <Option v-for="item in condition.groups" :value="item.group" :key="item.group">{{ item.group }} - {{ item.remark }}</Option>
        </Select>
      </FormItem>
      <Divider />
      <FormItem>
        <Checkbox v-model="node.serverable">{{$t('page.app.nodeform.serverable')}}</Checkbox>
      </FormItem>
      <FormItem v-if="node.serverable">
        <InputNumber v-model="node.weight" :min="1" /> {{$t('page.app.nodeform.weight')}}
      </FormItem>
      <Divider />
      <FormItem>
        <Checkbox v-model="node.taskable">{{$t('page.app.nodeform.taskable')}}</Checkbox>
      </FormItem>
      <FormItem v-if="node.taskable">
        <Select v-model="node.taskarr" filterable multiple :placeholder="$t('page.app.nodeform.tasks')">
          <Option v-for="item in condition.tasks" :value="item.task" :key="item.task">{{ item.task }} - {{ item.remark }}</Option>
        </Select>
      </FormItem>
      <Divider />
      <FormItem prop="manualAnurl">
        <Input v-model="node.manualAnurl" :placeholder="$t('page.app.nodeform.manualAnurl')">
        <span slot="prepend">http://{{node.host||'host'}}:{{node.port||'port'}}/</span></Input>
      </FormItem>
    </Form>
  </XcDrawer>
</template>

<script>
  import XcDrawer from '@/components/xcdrawer'
  export default {
    name: "comp-nodeadd",
    components: { XcDrawer },
    data() {
      return {
        node: {
          appname: '',
          host: '',
          port: '',
          group: '',
          serverable: false,
          weight: 1,
          taskable: false,
          tasks: '',
          taskarr: [],
          manualAnurl: '',
        },
        rules: {
          host: [{ required: true, trigger: 'blur' }],
          port: [{ required: true, trigger: 'blur' }],
          group: [{ required: true, trigger: 'blur' }],
          manualAnurl: [{ required: true, trigger: 'blur' }],
        },
        condition: {
          load: false,
          groups: [],
          tasks: [],
        },
      }
    },
    methods: {
      show(appname) {
        this.$refs.nodeform.resetFields()
        this.node.appname = appname
        // 判断是否需要加载
        if (this.condition.load) {
          this.$refs.drawer.show()
        } else {
          this.$md.dispatch('common_condition').then(data => {
            if (data.retCode === 1) {
              this.condition.groups = data.groups || []
              this.condition.tasks = data.tasks || []
              this.condition.load = true
              this.$refs.drawer.show()
            }
          })
        }
      },
      onSave() {
        this.$refs.nodeform.validate((valid) => {
          if (valid) {
            if (!this.node.serverable && !this.node.taskable) {
              this.$Message.warning(this.$t('page.app.nodeform.needtip'))
              return
            }
            if (this.node.taskable && this.node.taskarr.length === 0) {
              this.$Message.warning(this.$t('page.app.nodeform.tasksneed'))
              return
            }
            this.node.tasks = this.node.taskarr.join(',')
            this.$md.dispatch('app_node_add', {
              data: this.node
            }).then(data => {
              if (data.retCode === 1) {
                this.$Message.success(this.$t('submitok'))
                this.$refs.drawer.close(true)
                this.$emit('onRefresh')
              } else {
                switch (data.retMsg) {
                  case 'server.already':
                    this.$Message.error(this.$t(data.retMsg, [this.$t('page.app.nodeform.title')]))
                    break
                  default:
                    this.$Message.error(this.$t(data.retMsg))
                    break
                }
              }
            })
          }
        })
      },
    }
  };
</script>
